<template>
	<view class="userBox">
		<view class="userBox-content">
			<view class="ff-align-items-one ff-margin-bottom-40 ff-padding-top-10">
				<image class="userImg" src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/user.png"
					mode=""></image>
				<view class="ff-margin-left-20">
					<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-10">{{ state.infoList.userInfo.nick_name }}
					</view>
					<view class="ff-font-15 ff-color-999">{{ state.infoList.userInfo.account }}</view>
				</view>
			</view>
			<view @click="changePassword" class="ff-align-items-one ff-bg-fff ff-padding-15 ff-border-radius-5">
				<image class="userPassword"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/user-password.png" mode=""></image>
				<view class="ff-margin-left-15 ff-font-14">修改密码</view>
			</view>
		</view>
		<view class="userBox-but" @click="logOutClick">退出登录</view>
		<u-modal :show="logOutList.logOutState" title="" @cancel="logOutList.logOutState = false" @confirm="logOutConfirm"
			showCancelButton="true" :content="logOutList.logOutContent"></u-modal>
		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
	</view>
</template>

<script setup>
	import { getCurrentInstance, reactive, ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const { state, commit, dispatch } = useStore();
	const { proxy } = getCurrentInstance();
	onMounted(() => {
		// getUserInfo(); // 请求用户信息
	});

	// 请求用户信息
	let userInfo = reactive({ userInfoList: {} });
	let getUserInfo = async () => {
		const data = await proxy.$http.get({ url: '/install/userInfo' });
		console.log('用户详情数据-----', data);
		if (data.code == 200) {
			userInfo.userInfoList = data.data;
		}
	};

	// 跳转修改密码页面
	let changePassword = () => {
		proxy.$pageJump.navigateTo('/pages/views/install/components/me/components/changePassword');
	}

	// 退出登录
	let uToast = ref(null);
	const loading = ref(null);
	let logOutList = reactive({
		logOutState: false, // 弹窗显/隐
		logOutContent: '是否退出登录？'
	});
	let logOutClick = () => {
		logOutList.logOutState = true;
	};
	let logOutConfirm = async () => {
		loading.value.openLoading('退出中···'); // 打开loading
		const data = await proxy.$http.get({ url: '/blade-auth/oauth/logout' });
		console.log('退出登录成功', data);
		loading.value.closeLoading(); // 关闭loading
		if (data.success) {
			uToast.value.openuToastSuccess('退出成功'); // 打开loading
			setTimeout(() => {
				uni.clearStorageSync(); // 清空本地所有的缓存数据
				proxy.$pageJump.reLaunch('/pages/views/loginRegister/login/Login');
			}, 200);
		}
	};
</script>

<style scoped lang="scss">
	.userBox {
		&-content {
			background: url('https://fire-system.oss-cn-beijing.aliyuncs.com/web/new-fire-iot/userBg.png') no-repeat;
			background-size: cover;
			height: 50vh;
			width: 100%;
			z-index: -1;
			padding: 39rpx;

			.userImg {
				width: 125rpx;
				height: 125rpx;
			}

			.userPassword {
				width: 28rpx;
				height: 28rpx;
			}
		}

		&-but {
			position: fixed;
			bottom: 20%;
			width: 90%;
			margin: 0 5%;
			background-color: #fff;
			border-radius: 40rpx;
			color: #a6aebb;
			text-align: center;
			padding: 30rpx;
			font-size: 29rpx;
		}
	}
</style>